<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			*{
				padding: 0px;
				margin:0px;
			}
			ul{
				list-style: none;
			}
			li{
				width: 160px;
				float:left;
				border: 1px solid red;
				height:190px;
				text-align: center;
				margin-right: 10px;
				padding: 5px;
			}
			li img{
				border: 1px solid #ddd;
				margin-bottom: 5px;
				width: 160px;
				height: 160px;
				display: block;
			}
			table,td{
				border: 1px solid red;
				border-collapse: collapse;
			}
			td{
				padding: 0 20px;
			}
		</style>
	</head>
	<body>
		<table>
		</table>
		<ul>
			<li>
				<img src="images/1.jpg" alt="" />
				<button>加入购物车</button>
			</li>
			<li>
				<img src="images/2.jpg" alt="" />
				<button>加入购物车</button>
			</li>
			<li>
				<img src="images/3.jpg" alt="" />
				<button>加入购物车</button>
			</li>
			<li>
				<img src="images/4.jpg" alt="" />
				<button>加入购物车</button>
			</li>
		</ul>
		<script type="text/javascript">
			function setcookie(key,value,day){
				var date=new Date();
				date.setDate(date.getDate()+day);//设置过期时间
				document.cookie=key+'='+encodeURI(value)+';expires='+date;
			}
			function getcookie(key){
				var arr=decodeURI(document.cookie).split('; ');//编码后拆分成数组
				for(var i=0;i<arr.length;i++){
					var newarr=arr[i].split('=');//对数组的每一项再次拆分
					if(newarr[0]==key){//比较key值
						return newarr[1];//输出key对应的value
					}
				}
			}
			function delcookie(key){
				setcookie(key,'value',-1);//-1:代表过去时间
			}
			var arr=[{
		        "t": "Apple MacBook Pro 13.3英寸笔记本电脑 银色(Core i5 处理器/8GB内存/256GB SSD闪存/Retina屏 MF840CH/A)",
		        "pcp": "10788.00",
		        "img": "images/1.jpg",
		        "sid": "1"
		
		    }, {
		
		        "t": "Apple iPad Air 2 平板电脑 9.7英寸（64G WLAN版/A8X 芯片/Retina显示屏/Touch ID技术 MH182CH）金色",
		        "pcp": "3299.00",
		        "img": "images/2.jpg",
		        "sid": "2"
		    }, {
		
		        "t": "Apple iPad Air 平板电脑 9.7英寸（16G WLAN版/A7芯片/Retina显示屏 MD788CH）银色",
		        "pcp": "2099.00",
		        "img": "images/3.jpg",
		        "sid": "3"
		    }, {
		
		        "t": "Apple Mac mini台式电脑 (Core i5 处理器/8GB内存/1TB 存储 MGEN2CH/A)",
		        "pcp": "4988.00",
		        "img": "images/4.jpg",
		        "sid": "4"
		    }];
		   	var aBtn=document.getElementsByTagName('button');//求到按钮
		   	var num=0;
		   	var str='';
		   	var str1='';
		   	for(var i=0;i<aBtn.length;i++){//for按钮的张
		   		aBtn[i].index=i;//0-4当作按钮自定义的索引
		   		aBtn[i].onclick=function(){
		   			num=this.index;
		   			if(String(getcookie('bianhao')).indexOf(num)!=-1){
		   				var aTr=document.getElementsByTagName('tr');//至少一个。
		    			for(var j=0;j<aTr.length;j++){
		    				//找那个商品数量+1
		    				var cnum=aTr[j].getAttribute('xxx');//tr里面的自定义的索引
		    				if(cnum==num){
		    					var newnum=parseInt(aTr[j].getElementsByTagName('td')[3].innerHTML);//获取对应的数量
		    					newnum++;
		    					aTr[j].getElementsByTagName('td')[3].innerHTML=newnum;//将累加的数量设置回去
		    					str1[j]=newnum;
		    					setcookie('shuliang',str1,7);
		    				}
		    			}
		   			}else{
		   				str+=num;
		   				str1+=1;
		   				setcookie('bianhao',str,7);
		   				setcookie('shuliang',str1,7);
		   				createtable(num,1);
		   			}
		   		}
		   		
		   	}
		   	var table=document.getElementsByTagName('table')[0];
		    function createtable(index,sid){
		    	var str='';
			    for(var i=0;i<arr.length;i++){
			    	if(i==index){
			    		str='<tr xxx='+index+'>'+
			    			'<td><img src="'+arr[i].img+'" alt="" /></td>'+
							'<td>'+arr[i].t+'</td>'+
							'<td>'+arr[i].pcp+'</td>'+
							'<td>'+sid+'</td>'+
							'</tr>';
			    	}
			    }
			    table.innerHTML+=str;
		    }
		</script>
	</body>
</html>
